<template>
  <div>
    <h3>求和: {{ sum }}</h3>
    <button @click="sum++">add sum</button>
  </div>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'
export default {
  setup() {
    const sum = ref(0)
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
    return {
      sum
    }
  },
  //#region
  /* beforeCreate() {
      console.log('beforeCreate - 1')
    },
    created() {
      console.log('created - 2')
    },
    beforeMount() {
      console.log('beforeMount - 3')
    },
    mounted() {
      console.log('mounted - 4')
    },
    beforeUpdate() {
      console.log('beforeUpdat - 5')
    },
    updated() {
      console.log('updated - 6')
    },
    beforeUnmount() {
      console.log('beforeUnmount - 7')
    },
    unmounted() {
      console.log('unmounted - 8')
    }
  **/
  //#onregion
}
</script>

<style>

</style>